import useMessage from "@/hooks/useMessage";
import useModal from "@/hooks/useModal";
import { RootState } from "@/redux";
import { getLeaveWordList, removeLeaveWord } from "@/redux/modules/leaveWord/action";
import { Button, Card, Drawer, Modal, Space, Table } from "antd";
import type { ColumnsType } from "antd/es/table";
import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import styles from "./index.module.less";
import LeaveWordEdit from "../LeaveWordEdit";
import { LeaveWord } from "@/api/interface/leaveWord";
import LeaveWordFilter from "../LeaveWordFilter";

const LeaveWordList: React.FC = props => {
	interface DataType {
		id: number;
		key: number;
		user: string;
		content: string;
		createdAt: string;
		dianzan: number;
	}
	[];

	const columns: ColumnsType<DataType> = [
		{
			title: "内容",
			dataIndex: "content",
			key: "content",
			ellipsis: true
		},
		{
			width: 200,
			title: "留言账号",
			dataIndex: "user",
			key: "user"
		},
		{
			width: 100,
			title: "点赞数",
			dataIndex: "dianzan",
			key: "dianzan"
		},
		{
			title: "留言日期",
			dataIndex: "createdAt",
			key: "createdAt"
		},
		{
			title: "操作",
			key: "action",
			render: (_, row) => {
				return (
					<>
						<Space size="middle">
							<a onClick={() => openEdit(row)}>修改</a>
							<a onClick={() => openModal(row.id)}>删除</a>
						</Space>
					</>
				);
			}
		}
	];

	const listExtra = (
		<div style={{ display: "flex", gap: 8 + "px" }}>
			<Button type="primary" onClick={() => getLeaveWordList()}>
				刷新
			</Button>
		</div>
	);

	const { contextHolder, success } = useMessage();
	const { id, isModalOpen, openModal, closeModal } = useModal();

	const deleteCircleFriend = () => {
		removeLeaveWord(id);
		closeModal();
		success("删除成功");
	};

	const leaveWordList = useSelector((state: RootState) => state.leaveWord.leaveWordList);

	const data: DataType[] = leaveWordList.map(item => {
		return {
			id: item.id,
			key: item.id,
			user: item.user.name,
			content: item.content,
			createdAt: item.createdAt,
			dianzan: item.dianzan
		};
	});

	useEffect(() => {
		getLeaveWordList();
	}, []);

	// 修改
	const [leaveWord, setLeaveWord] = useState({});
	const [editVisible, setEditVisible] = useState(false);
	const openEdit = async (row: DataType) => {
		setLeaveWord(row);
		setEditVisible(true);
	};

	// 搜索
	const onSearch = (data?: LeaveWord) => {
		getLeaveWordList(1, 10, data);
	};

	return (
		<div className={styles.root}>
			{contextHolder}
			<LeaveWordFilter onSearch={onSearch} />
			<Card title="数据列表" extra={listExtra}>
				<Table columns={columns} dataSource={data} />
			</Card>

			<Modal title="提醒" mask={false} visible={isModalOpen} onOk={deleteCircleFriend} onCancel={closeModal}>
				确定删除该留言吗
			</Modal>

			<Drawer
				title="修改"
				placement="right"
				width={500}
				onClose={() => {
					setEditVisible(false);
				}}
				visible={editVisible}
			>
				<LeaveWordEdit data={leaveWord} onComfirm={() => setEditVisible(false)}></LeaveWordEdit>
			</Drawer>
		</div>
	);
};

export default LeaveWordList;
